<template>
  <div>
    <el-dialog title="编辑工作人员" :visible.sync="isEditPersonnel" width="50%" :before-close="handleClose" :close-on-click-modal='false'>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="工作人员">
          <el-input type="text" placeholder="请输入工作人员" v-model="form.phase_user" show-word-limit > </el-input>
        </el-form-item>
        <el-form-item label="附加上传">
          <el-upload class="upload-demo" :action="this.Api + '/api/makeAliOssFile'" :on-success="afterSuccess" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList" :data="this.token">
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="工作内容">
          <editor-bar :content="this.content" @change="change"></editor-bar>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import EditorBar from '@/components/wangEditor.vue'
export default {
  components: { EditorBar },
  props: ['isEditPersonnel', 'e'],
  data () {
    return {
      Api: '',
      token: {},
      form: {
        phase_user: '',
        json_url: []
      },
      fileList: [],
      content: ''
    }
  },
  created () {
    this.form.phase_user = this.e.rows.phase_user
    this.e.rows.json_url.forEach((item, index) => {
      this.fileList.push({name: item.response.data.file_name, url: item.response.data.url})
    })
    this.content = this.e.rows.content
    this.Api = downloadApi
    this.token.token = window.sessionStorage.getItem('token')
  },
  methods: {
    handleClose (done) {
      this.$emit('noEditPersonnel')
    },
    handleRemove (file, fileList) { // 文件列表移除文件时的钩子
      this.e.rows.json_url.forEach((item, index) => {
        if (item.response.data.file_name === file.name) {
          this.e.rows.json_url.splice(index, 1)
        }
      })
    },
    afterSuccess (file, fileList) { // 成功后
      this.form.json_url.push(fileList)
      this.e.rows.json_url.push(fileList)
    },
    beforeRemove (file, fileList) { // 删除前
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    change (val) {
      this.content = val.val
    },
    submitFn () {
      this.form.json_url = this.e.rows.json_url
      this.form.content = this.content
      this.form.id = this.e.rows.id
      this.$emit('noEditPersonnel', {val: this.form, index: this.e.index})
    }
  }
}
</script>
